<template>
	<div class="load-more">
		<div class="load-more-empty" v-if="showEmpty">
			<uv-empty :icon="$surl('/empty/data.png')" :text='text'></uv-empty>
		</div>
		<uv-load-more :status="loadStatus" :customStyle='customStyle' v-else />
	</div>
</template>

<script setup>
	import { ref, computed } from 'vue';

	const props = defineProps({
		text: {
			type: String,
			default: '暂时没有数据'
		},
		list: {
			type: Array,
			default: () => []
		},
		loadStatus: {
			type: String,
			default: 'loadmore'
		},
	});

	const customStyle = ref({
		margin: 0,
		paddingBottom: '20rpx',
		paddingTop: '20rpx'
	})

	const showEmpty = computed(() => {
		return !props.list.length && props.loadStatus === 'nomore'
	})
</script>

<style lang="scss" scoped>
	.load-more-empty {
		margin-top: 10vh;
		margin-bottom: 15vh;
	}
</style>